<template>
    <div class="contener">
        <div class="tree-page">
            <!-- 左侧树 -->
            <div class="tree-menu">
                <base-tree
                    :data="baseTreeConfig.data"
                    :loading="baseTreeConfig.loading"
                    :currentNodeKey="baseTreeConfig.currentNodeKey"
                    :filterShow="baseTreeConfig.filterShow"
                    @NodeClick="handelTreeClick"
                />
            </div>
            <!-- 页面 -->
            <div class="page">
                <!-- 搜索 -->
                <transition
                    @before-enter="_beforeEnter"
                    @enter="_enter"
                    @after-enter="_afterEnter"
                    @before-leave="_beforeLeave"
                    @leave="_leave"
                    @after-leave="_afterLeave"
                >
                    <div
                        class="search-contener"
                        ref="searchContener"
                        v-show="searchFormConfig.searchContenerShow"
                    >
                        <base-form
                            :formItems="searchFormConfig.formItems"
                            :formData="searchFormConfig.formSubmit"
                            ref="searchForm"
                            @onButtonClick="searchBarButtonClick"
                        />
                    </div>
                </transition>
                <!-- 表格 -->
                <div class="datas-contener">
                    <!-- 表格操作项 -->
                    <div class="option-contener">
                        <data-options
                            @buttonClick="handelOptionClick"
                            :leftConfig="dataOptionConfig.leftConfig"
                        />
                    </div>
                    <!-- 表格展示项 -->
                    <div class="table-contener">
                        <base-table
                            ref="baseTable"
                            :tableData="baseTableConfig.tableData"
                            :tableHeader="baseTableConfig.tableHeader"
                            :tableConfig="baseTableConfig.tableConfig"
                            @handleSelection="tableDataSelected"
                        >
                            <template slot-scope="{ scope }">
                                <span v-if="scope.type === 'index'">
                                    {{ scope.$index + 1 }}
                                </span>
                                <span v-if="scope.type === 'apiPrefix'">
                                    {{ '/api/web/' }}
                                </span>
                                <el-link
                                    v-if="scope.type === 'link'"
                                    type="primary"
                                    @click="showDetail(scope.row)"
                                    >{{ scope.row.apiName }}</el-link
                                >
                                <el-link v-if="scope.type === 'authTypeName'">{{
                                    scope.row.authType
                                        | getAttrName(
                                            authTypeList,
                                            'value',
                                            'label'
                                        )
                                }}</el-link>

                                <span v-if="scope.type === 'source'">{{
                                    scope.row.datasourceId
                                        | getAttrName(
                                            dataSourceList,
                                            'value',
                                            'label'
                                        )
                                }}</span>
                                <el-tag
                                    v-if="scope.type === 'tag'"
                                    size="small"
                                    :type="
                                        scope.row.apiStatus === 'edit'
                                            ? 'default'
                                            : 'primary'
                                    "
                                    >{{
                                        scope.row.apiStatus
                                            | getAttrName(
                                                apiStatusList,
                                                'value',
                                                'label'
                                            )
                                    }}</el-tag
                                >
                                <div v-if="scope.type === 'handle'">
                                    <el-button
                                        type="text"
                                        @click.stop="copyTableData(scope.row)"
                                        v-hasPermi="['tool/pserv/apiInfo/save']"
                                        >复制</el-button
                                    >
                                    <el-button
                                        v-if="scope.row.apiStatus === 'edit'"
                                        type="text"
                                        @click.stop="publicTableData(scope.row)"
                                        v-hasPermi="[
                                            'tool/pserv/apiInfo/piblic'
                                        ]"
                                        >发布</el-button
                                    >
                                    <el-button
                                        v-if="scope.row.apiStatus === 'edit'"
                                        type="text"
                                        @click.stop="updateTableData(scope.row)"
                                        v-hasPermi="[
                                            'tool/pserv/apiInfo/update'
                                        ]"
                                        >修改</el-button
                                    >
                                    <el-button
                                        v-if="
                                            scope.row.apiStatus === 'release' &&
                                                scope.row.enabled === 0
                                        "
                                        type="text"
                                        @click.stop="revokeData(scope.row)"
                                        v-hasPermi="[
                                            'tool/pserv/apiInfo/revoke'
                                        ]"
                                        >撤销</el-button
                                    >
                                    <el-button
                                        v-if="
                                            scope.row.apiStatus === 'release' &&
                                                scope.row.enabled === 0
                                        "
                                        type="text"
                                        @click.stop="updateEnable(scope.row, 1)"
                                        v-hasPermi="[
                                            'tool/pserv/apiInfo/updateState'
                                        ]"
                                        >开放</el-button
                                    >
                                    <el-button
                                        v-if="
                                            scope.row.apiStatus === 'release' &&
                                                scope.row.enabled === 1
                                        "
                                        type="text"
                                        @click.stop="updateEnable(scope.row, 0)"
                                        v-hasPermi="[
                                            'tool/pserv/apiInfo/updateState'
                                        ]"
                                        >关闭</el-button
                                    >
                                    <el-button
                                        v-if="
                                            scope.row.apiStatus === 'edit' ||
                                                (scope.row.apiStatus ===
                                                    'release' &&
                                                    scope.row.enabled === 0)
                                        "
                                        type="text"
                                        @click.stop="deleteTableData(scope.row)"
                                        v-hasPermi="[
                                            'tool/pserv/apiInfo/delete'
                                        ]"
                                        >删除</el-button
                                    >
                                    <el-button
                                        type="text"
                                        @click.stop="testApi(scope.row)"
                                        >测试</el-button
                                    >
                                </div>
                            </template>
                        </base-table>
                    </div>
                    <!-- 分页 -->
                    <div class="paging-contener">
                        <pagin-ation
                            :size="paginationConfig.size"
                            :total="paginationConfig.total"
                            :type="paginationConfig.type"
                            @PageNumber="pageNumberChange"
                            @PageSize="pageSizeChange"
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹框 -->
        <el-dialog
            :title="dialogConfig.title"
            :visible.sync="dialogConfig.show"
            :width="dialogConfig.width"
            v-dialogDrag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body
        >
            <!-- 筛选表格列 -->
            <div
                class="dialog-content"
                v-if="dialogConfig.key === 'tableColumn'"
            >
                <base-transfer
                    :transferConfig="tableColumnTransferConfig"
                    ref="baseTransfer"
                />
            </div>
            <!-- 新增 -->
            <div
                class="dialog-content"
                v-if="dialogConfig.key === 'addTableData'"
            >
                <el-steps
                    :active="curActive"
                    finish-status="success"
                    simple
                    style="margin-top: 20px"
                >
                    <el-step title="基本信息" />
                    <el-step title="SQL脚本" />
                    <el-step title="请求参数" />
                    <el-step title="分页设置" />
                </el-steps>
                <div class="edit-contener" v-if="curActive === 0">
                    <base-form
                        :formItems="addBaseFormConfig.formItems"
                        :formData="addBaseFormConfig.formSubmit"
                        :formConfig="addBaseFormConfig.formConfig"
                        :formRules="addBaseFormConfig.formRule"
                        @onSelectChange="handelStatusChange"
                        ref="addBaseForm"
                        @onButtonClick="addFormButtonClick"
                    />
                </div>
                <div class="edit-contener" v-if="curActive === 1">
                    <el-row style="margin-bottom: 5px">
                        <el-button
                            size="mini"
                            @click.stop="setSqlFalg('foreach')"
                            >foreach</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('if')"
                            >if</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('set')"
                            >set</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('where')"
                            >where</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('like')"
                            >like</el-button
                        >
                    </el-row>
                    <monaco-editor
                        :editorOptions="editorOptions"
                        @onCodeChange="onCodeChange"
                    />
                </div>
                <div class="edit-contener" v-if="curActive === 2">
                    <base-table
                        ref="paramTable"
                        :tableData="paramTableConfig.tableData"
                        :tableHeader="paramTableConfig.tableHeader"
                        :tableConfig="paramTableConfig.tableConfig"
                    >
                        <template slot-scope="{ scope }">
                            <el-input
                                v-if="scope.type === 'paramNameInput'"
                                placeholder="请输入参数名称"
                                v-model="scope.row.paramName"
                            />
                            <el-input
                                v-if="scope.type === 'exampleInput'"
                                placeholder="请输入参数示例"
                                v-model="scope.row.example"
                            />
                            <el-input
                                v-if="scope.type === 'paramDescInput'"
                                placeholder="请输入参数描述"
                                v-model="scope.row.paramDesc"
                            />
                            <el-checkbox
                                v-if="scope.type === 'requiredCheckBox'"
                                v-model="scope.row.required"
                            />
                            <el-select
                                v-if="scope.type === 'paramTypeSelect'"
                                v-model="scope.row.paramType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in paramTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </template>
                    </base-table>
                </div>
                <div class="edit-contener" v-if="curActive === 3">
                    <base-form
                        :formItems="addPageFormConfig.formItems"
                        :formData="addPageFormConfig.formSubmit"
                        :formConfig="addPageFormConfig.formConfig"
                        ref="addPageForm"
                    />
                </div>
            </div>
            <!-- 修改 -->
            <div
                class="dialog-content"
                v-if="dialogConfig.key === 'updateTableData'"
            >
                <el-steps
                    :active="curActive"
                    finish-status="success"
                    simple
                    style="margin-top: 20px"
                >
                    <el-step title="基本信息" />
                    <el-step title="SQL脚本" />
                    <el-step title="请求参数" />
                    <el-step title="分页设置" />
                </el-steps>
                <div class="edit-contener" v-if="curActive === 0">
                    <base-form
                        :formItems="updateBaseFormConfig.formItems"
                        :formData="updateBaseFormConfig.formSubmit"
                        :formConfig="updateBaseFormConfig.formConfig"
                        :formRules="updateBaseFormConfig.formRule"
                        @onSelectChange="handelStatusChange"
                        ref="updateBaseForm"
                        @onButtonClick="addFormButtonClick"
                    />
                </div>
                <div class="edit-contener" v-if="curActive === 1">
                    <el-row style="margin-bottom: 5px">
                        <el-button
                            size="mini"
                            @click.stop="setSqlFalg('foreach')"
                            >foreach</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('if')"
                            >if</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('set')"
                            >set</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('where')"
                            >where</el-button
                        >
                        <el-button size="mini" @click.stop="setSqlFalg('like')"
                            >like</el-button
                        >
                    </el-row>
                    <monaco-editor
                        :editorOptions="editorOptions"
                        @onCodeChange="onCodeChange"
                    />
                </div>
                <div class="edit-contener" v-if="curActive === 2">
                    <base-table
                        ref="paramTable"
                        :tableData="paramTableConfig.tableData"
                        :tableHeader="paramTableConfig.tableHeader"
                        :tableConfig="paramTableConfig.tableConfig"
                    >
                        <template slot-scope="{ scope }">
                            <el-input
                                v-if="scope.type === 'paramNameInput'"
                                placeholder="请输入参数名称"
                                v-model="scope.row.paramName"
                            />
                            <el-input
                                v-if="scope.type === 'exampleInput'"
                                placeholder="请输入参数示例"
                                v-model="scope.row.example"
                            />
                            <el-input
                                v-if="scope.type === 'paramDescInput'"
                                placeholder="请输入参数描述"
                                v-model="scope.row.paramDesc"
                            />
                            <el-checkbox
                                v-if="scope.type === 'requiredCheckBox'"
                                v-model="scope.row.required"
                            />
                            <el-select
                                v-if="scope.type === 'paramTypeSelect'"
                                v-model="scope.row.paramType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in paramTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </template>
                    </base-table>
                </div>
                <div class="edit-contener" v-if="curActive === 3">
                    <base-form
                        :formItems="updatePageFormConfig.formItems"
                        :formData="updatePageFormConfig.formSubmit"
                        :formConfig="updatePageFormConfig.formConfig"
                        ref="updatePageForm"
                    />
                </div>
            </div>
            <div
                class="detail-content"
                v-if="dialogConfig.key === 'showDetail'"
            >
                <el-form
                    ref="detailForm"
                    :model="detailForm"
                    label-width="100px"
                    size="mini"
                >
                    <el-row>
                        <el-col :span="24"><h3>基本信息</h3></el-col>
                        <el-col :span="9">
                            <el-form-item label="接口编号："
                                >{{ detailForm.apiId }}
                            </el-form-item>
                            <el-form-item label="上线时间：">{{
                                detailForm.releaseTime
                            }}</el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="接口名称：">{{
                                detailForm.apiName
                            }}</el-form-item>
                            <el-form-item label="接口类型：">
                                <div v-if="detailForm.sqlType === 'select'">
                                    查询
                                </div>
                                <div
                                    v-else-if="detailForm.sqlType === 'insert'"
                                >
                                    插入
                                </div>
                                <div
                                    v-else-if="detailForm.sqlType === 'update'"
                                >
                                    更新
                                </div>
                                <div
                                    v-else-if="detailForm.sqlType === 'delete'"
                                >
                                    删除
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="认证方式：">{{
                                detailForm.authType
                                    | getAttrName(
                                        authTypeList,
                                        'value',
                                        'label'
                                    )
                            }}</el-form-item>
                            <el-form-item label="版本号：">{{
                                detailForm.version
                            }}</el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="数据源：">{{
                                detailForm.datasourceId
                                    | getAttrName(
                                        dataSourceList,
                                        'value',
                                        'label'
                                    )
                            }}</el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="接口描述：">{{
                                detailForm.remarks
                            }}</el-form-item>
                        </el-col>
                        <el-col :span="24"><h3>使用说明</h3></el-col>
                        <el-col :span="24">
                            <div class="subtitle">请求信息</div>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="请求方式：">{{
                                detailForm.apiMethod
                            }}</el-form-item>
                        </el-col>
                        <el-col :span="18">
                            <el-form-item label="请求地址："
                                >http://{IP地址}:{HOST端口}/api/web/{{
                                    detailForm.apiPath
                                }}</el-form-item
                            >
                        </el-col>
                        <el-col :span="24">
                            <div class="subtitle">请求参数</div>
                        </el-col>
                        <el-col :span="24">
                            <base-table
                                ref="reuestParamTable"
                                :tableData="detailForm.requestParam"
                                :tableHeader="
                                    requestParamTableConfig.tableHeader
                                "
                                :tableConfig="
                                    requestParamTableConfig.tableConfig
                                "
                            >
                                <template slot-scope="{ scope }">
                                    <span
                                        v-if="scope.type === 'requiredText'"
                                        >{{
                                            scope.row.required === true
                                                ? '必填'
                                                : '非必填'
                                        }}</span
                                    >
                                </template>
                            </base-table>
                        </el-col>
                        <el-col :span="24">
                            <div class="subtitle">响应参数</div>
                        </el-col>
                        <base-table
                            ref="responseParamTable"
                            :tableData="responseParamTableConfig.tableData"
                            :tableHeader="responseParamTableConfig.tableHeader"
                            :tableConfig="responseParamTableConfig.tableConfig"
                        >
                            <template slot-scope="{ scope }">
                                <span v-if="scope.type === 'requiredText'">{{
                                    scope.row.required === true
                                        ? '必填'
                                        : '非必填'
                                }}</span>
                            </template>
                        </base-table>
                        <el-col :span="24">
                            <div class="subtitle">错误码列表</div>
                        </el-col>
                        <base-table
                            ref="reuestParamTable"
                            :tableData="errorCodeTableConfig.tableData"
                            :tableHeader="errorCodeTableConfig.tableHeader"
                            :tableConfig="errorCodeTableConfig.tableConfig"
                        />
                    </el-row>
                </el-form>
            </div>
            <div v-if="dialogConfig.key === 'testApi'" class="test-content">
                <base-table
                    ref="testApiParamTable"
                    :tableData="testApiTableConfig.tableData"
                    :tableHeader="testApiTableConfig.tableHeader"
                    :tableConfig="testApiTableConfig.tableConfig"
                >
                    <template slot-scope="{ scope }">
                        <el-input
                            v-if="scope.type === 'paramValueInput'"
                            placeholder="请输入参数值"
                            v-model="scope.row.paramValue"
                            :size="'' | setSize('')"
                        />
                        <span v-if="scope.type === 'requiredText'">{{
                            scope.row.required === true ? '必填' : '非必填'
                        }}</span>
                    </template>
                </base-table>
                <div class="test-api-button-group">
                    <el-button
                        size="small"
                        type="primary"
                        @click="handelCofimeDialog"
                        >执行</el-button
                    >
                </div>
                <div class="data-contener">
                    <monaco-editor :editorOptions="testApiEditorOptions" />
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
                v-if="dialogConfig.key === 'tableColumn'"
            >
                <el-button size="small" @click="handelCloseDialog"
                    >取 消</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="handelCofimeDialog"
                    >确 定</el-button
                >
            </span>
            <span
                slot="footer"
                class="dialog-footer"
                v-else-if="
                    dialogConfig.key === 'addTableData' ||
                        dialogConfig.key === 'updateTableData'
                "
            >
                <el-button
                    v-if="curActive === 1 || curActive === 2"
                    size="small"
                    @click="prev"
                    >上一步</el-button
                >
                <el-button v-if="curActive !== 3" size="small" @click="next"
                    >下一步</el-button
                >
                <el-button
                    v-if="curActive === 3"
                    size="small"
                    @click="handelCloseDialog"
                    >取 消</el-button
                >
                <el-button
                    v-if="curActive === 3"
                    size="small"
                    type="primary"
                    @click="handelCofimeDialog"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import BaseTree from '@/components/baseTree/index'
import BaseForm from '@/components/baseForm/index'
import DataOptions from '@/components/dataOptions/index'
import BaseTable from '@/components/baseTable/index'
import PaginAtion from '@/components/pagination/index'
import BaseTransfer from '@/components/baseTransfer/index'
import monacoEditor from '@/components/monacoEditor/index'
import globalMixin from '@/mixins/global'
import { apiGroupTree } from '@/http/apis/tool/pserv/type'
import { getDataSourceSelectData } from '@/http/apis/system/dataSource/index'
import { validApiPath } from '@/utils/validate'
import {
    listApiInfo,
    addApiInfo,
    updateApiInfo,
    delApiInfo,
    publishApiInfo,
    updateApiState,
    verifyApi,
    revokeApiInfo
} from '@/http/apis/tool/pserv/info'
import { getDictDatas } from '@/plugins/dict'
import {
    assemblyDataByTableColumn,
    setFormItemProp,
    setSelectFormart
} from '@/utils/tool'
export default {
    components: {
        BaseTree,
        BaseForm,
        DataOptions,
        BaseTable,
        PaginAtion,
        BaseTransfer,
        monacoEditor
    },
    mixins: [globalMixin],
    dicts: ['sys_request_method', 'sys_user_sex'],
    data() {
        return {
            curActive: 0,
            //接口详情表单
            detailForm: '',
            pageSetList: [
                { value: '0', name: '不分页' },
                { value: '1', name: '分页' }
            ],
            apiStatusList: [
                { value: 'edit', name: '开发中', label: '开发中' },
                { value: 'release', name: '已发布', label: '已发布' }
            ],
            authTypeList: getDictDatas('api_auth_type'),
            paramTypeList: getDictDatas('api_params_type'),
            dataSourceList: [],
            // 通用树组件配置
            baseTreeConfig: {
                // tree的数据
                data: [],
                // tree的加载状态
                loading: false,
                // tree选中的树
                currentNodeKey: '',
                // 过滤显示
                filterShow: true
            },
            //编辑器
            editorOptions: {
                value: '',
                language: 'sql',
                theme: 'vs-dark'
            },
            //api测试返回数据编辑器
            testApiEditorOptions: {
                value: '',
                language: 'json',
                theme: 'vs-dark'
            },
            //写入sql
            writeSql: '',
            // 搜索表单配置
            searchFormConfig: {
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入接口名称',
                            label: '接口名称',
                            prop: 'apiName',
                            width: 'w-2'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入接口方法',
                            label: '接口方法',
                            prop: 'apiPath',
                            width: 'w-2'
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择数据源',
                            label: '数据源',
                            prop: 'datasourceId',
                            width: 'w-2',
                            options: []
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择状态',
                            label: '状态',
                            prop: 'apiStatus',
                            width: 'w-2',
                            options: []
                        },
                        {
                            ltype: 'datePicker',
                            type: 'daterange',
                            placeholder: '请选择创建时间',
                            label: '创建时间',
                            prop: 'timeRange',
                            width: 'w-3',
                            startPlaceholder: '请选择开始时间',
                            endPlaceholder: '请选择结束时间',
                            valueFormat: 'yyyy-MM-dd'
                        },
                        {
                            ltype: 'button',
                            type: 'primary',
                            text: '搜索',
                            prop: 'searchDatas',
                            icon: 'el-icon-search',
                            width: 'w-auto',
                            loading: false
                        },
                        {
                            ltype: 'button',
                            type: 'default',
                            text: '重置',
                            prop: 'resetSearchForm',
                            icon: 'el-icon-refresh-right',
                            width: 'w-auto'
                        }
                    ]
                ],
                formSubmit: {
                    apiName: '',
                    apiPath: '',
                    status: '',
                    timeRange: ''
                },
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: 'auto'
                },
                // 搜索控件是否显示
                searchContenerShow: true
            },
            // 数据操作项配置
            dataOptionConfig: {
                // 左侧按钮配置
                leftConfig: [
                    {
                        prop: 'addTableData',
                        label: '新增',
                        icon: 'el-icon-plus',
                        type: 'primary',
                        disabled: false,
                        hasPermi: ['tool/pserv/apiInfo/save']
                    },
                    {
                        prop: 'deleteTableData',
                        label: '删除',
                        icon: 'el-icon-delete',
                        type: 'danger',
                        disabled: false,
                        hasPermi: ['tool/pserv/apiInfo/delete']
                    }
                ]
            },
            // 表格配置
            baseTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        type: 'selection',
                        width: 50,
                        fixed: 'left',
                        label: '选择',
                        visible: true
                    },
                    {
                        type: 'link',
                        prop: 'apiName',
                        label: '接口名称',
                        showOverflowTooltip: true,
                        visible: true
                    },
                    {
                        type: 'apiPrefix',
                        label: '接口前缀',
                        showOverflowTooltip: true,
                        visible: true
                    },
                    {
                        prop: 'apiPath',
                        label: '接口方法',
                        showOverflowTooltip: true,
                        visible: true
                    },
                    {
                        prop: 'apiMethod',
                        label: '请求方式',
                        visible: true
                    },
                    {
                        type: 'authTypeName',
                        label: '认证类型',
                        visible: true
                    },
                    {
                        prop: 'version',
                        label: '版本',
                        width: 80,
                        visible: true
                    },
                    {
                        type: 'tag',
                        label: '接口状态',
                        width: 80,
                        visible: true
                    },
                    {
                        type: 'source',
                        label: '数据源',
                        visible: true
                    },
                    {
                        prop: 'releaseTime',
                        label: '发布时间',
                        showOverflowTooltip: true,
                        visible: true
                    },
                    {
                        label: '操作',
                        type: 'handle',
                        width: 200,
                        fixed: 'right',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                },
                // 选中的表格数据
                tableCheckedDatas: []
            },
            // 分页配置
            paginationConfig: {
                type: 'md',
                size: 10,
                currentPage: 1,
                total: 100
            },

            // 参数表格配置
            paramTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        type: 'paramNameInput',
                        prop: 'paramName',
                        label: '参数名称',
                        visible: true
                    },
                    {
                        type: 'paramTypeSelect',
                        prop: 'paramType',
                        label: '参数类型',
                        visible: true
                    },
                    {
                        type: 'exampleInput',
                        prop: 'example',
                        label: '参数示例',
                        visible: true
                    },
                    {
                        type: 'paramDescInput',
                        prop: 'paramDesc',
                        label: '描述',
                        visible: true
                    },
                    {
                        type: 'requiredCheckBox',
                        prop: 'required',
                        label: '必填',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            },
            //请求参数表格
            requestParamTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'paramName',
                        label: '参数名称',
                        visible: true
                    },
                    {
                        prop: 'paramType',
                        label: '参数类型',
                        visible: true
                    },
                    {
                        prop: 'example',
                        label: '参数示例',
                        visible: true
                    },
                    {
                        prop: 'paramDesc',
                        label: '描述',
                        visible: true
                    },
                    {
                        type: 'requiredText',
                        prop: 'required',
                        label: '必填',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            },
            //返回参数表格
            responseParamTableConfig: {
                // 表格数据
                tableData: [
                    {
                        paramName: 'code',
                        paramType: 'Integer',
                        required: true,
                        example: 0,
                        paramDesc: '响应编码'
                    },
                    {
                        paramName: 'msg',
                        paramType: 'Integer',
                        required: true,
                        example: 'success',
                        paramDesc: '响应信息'
                    },
                    {
                        paramName: 'data',
                        paramType: 'Object',
                        required: true,
                        example: 0,
                        paramDesc: '返回值'
                    }
                ],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'paramName',
                        label: '参数名称',
                        visible: true
                    },
                    {
                        prop: 'paramType',
                        label: '参数类型',
                        visible: true
                    },
                    {
                        prop: 'example',
                        label: '参数示例',
                        visible: true
                    },
                    {
                        prop: 'paramDesc',
                        label: '描述',
                        visible: true
                    },
                    {
                        type: 'requiredText',
                        prop: 'required',
                        label: '必填',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            },
            errorCodeTableConfig: {
                // 表格数据
                tableData: [
                    {
                        key: '1',
                        errorCode: '40001',
                        errorExplain: '无效的接口'
                    },
                    {
                        key: '2',
                        errorCode: '40002',
                        errorExplain: '无访问接口权限'
                    },
                    {
                        key: '3',
                        errorCode: '40003',
                        errorExplain: '接口不支持POST请求'
                    },
                    {
                        key: '6',
                        errorCode: '40004',
                        errorExplain: '接口不支持GET请求'
                    },
                    {
                        key: '6',
                        errorCode: '40005',
                        errorExplain: '接口不支持该类型请求'
                    },
                    {
                        key: '7',
                        errorCode: '40006',
                        errorExplain: '接口已下线'
                    },
                    {
                        key: '8',
                        errorCode: '40007',
                        errorExplain: '接口调用次数已达上线'
                    },
                    {
                        key: '10',
                        errorCode: '40010',
                        errorExplain: 'IP地址不在有效范围内'
                    },
                    {
                        key: '11',
                        errorCode: '40011',
                        errorExplain: 'SQL执行失败，请检查SQL是否正常'
                    },
                    {
                        key: '12',
                        errorCode: '41000',
                        errorExplain: '必要参数不能为空'
                    }
                ],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'errorCode',
                        label: '错误码',
                        visible: true
                    },
                    {
                        prop: 'errorExplain',
                        label: '说明',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            },
            // 测试api参数表格配置
            testApiTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'paramName',
                        label: '参数名称',
                        visible: true
                    },
                    {
                        prop: 'paramType',
                        label: '参数类型',
                        visible: true
                    },
                    {
                        prop: 'paramDesc',
                        label: '描述',
                        visible: true
                    },
                    {
                        prop: 'required',
                        label: '必填',
                        visible: true
                    },
                    {
                        prop: 'example',
                        label: '参数示例',
                        visible: true
                    },
                    {
                        type: 'paramValueInput',
                        prop: 'paramValue',
                        label: '参数值',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            },
            //接口测试提交数据
            testApiFormSubmit: {
                sqlScript: '',
                datasourceId: '',
                datasourceType: '',
                requestParams: '',
                configParams: []
            },
            // 弹框配置
            dialogConfig: {
                // 弹框标题
                title: '新增',
                // 是否显示
                show: false,
                // 宽度
                width: 'auto',
                // 弹框标识(用来区分弹框内容)
                key: ''
            },
            // 查询表格数据的参数
            queryTableParams: {
                pageNo: 0,
                pageSize: 10,
                entity: {}
            },
            // 表格列筛选配置
            tableColumnTransferConfig: {
                // 穿梭框的数据
                data: [],
                // 穿梭框的标题
                titles: ['显示', '隐藏'],
                // 隐藏的列
                modelList: []
            },
            // 新增基本参数表单配置
            addBaseFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入接口名称',
                            label: '接口名称',
                            prop: 'apiName',
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入接口方法',
                            label: '接口方法',
                            prop: 'apiPath',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择请求方式',
                            label: '请求方式',
                            prop: 'apiMethods',
                            width: 'w-1',
                            multiple: true,
                            options: getDictDatas('sys_request_method')
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择授权类型',
                            label: '授权类型',
                            prop: 'authType',
                            width: 'w-1',
                            multiple: false,
                            options: getDictDatas('api_auth_type')
                        }
                    ],
                    [
                        {
                            ltype: 'treeSelect',
                            placeholder: '请选择接口分组',
                            label: '接口分组',
                            prop: 'groupId',
                            width: 'w-1',
                            multiple: false,
                            options: []
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择数据源',
                            label: '数据源',
                            prop: 'datasourceId',
                            multiple: false,
                            width: 'w-1',
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: 'mysql',
                            label: '数据源类型',
                            prop: 'datasourceType',
                            disabled: true,
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入版本号',
                            label: '版本号',
                            prop: 'version',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            type: 'textarea',
                            placeholder: '请输入接口描述',
                            label: '接口描述',
                            prop: 'remarks',
                            width: 'w-1'
                        }
                    ]
                ],
                // 提交项
                formSubmit: {
                    apiName: '',
                    apiPath: '',
                    apiMethods: [],
                    authType: 'none',
                    groupId: null,
                    datasourceId: '',
                    datasourceType: '',
                    version: '',
                    remarks: '',
                    sqlScript: ''
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '100px'
                },
                // 验证项
                formRule: {
                    apiName: [
                        {
                            required: true,
                            message: '请输入接口名称',
                            trigger: 'blur'
                        }
                    ],
                    apiPath: [
                        {
                            required: true,
                            message: '请输入接口方法'
                        },
                        {
                            trigger: 'blur',
                            validator: validApiPath
                        }
                    ],
                    apiMethods: [
                        {
                            required: true,
                            message: '请选择请求方式',
                            trigger: 'blur'
                        }
                    ],
                    authType: [
                        {
                            required: true,
                            message: '请选择授权类型',
                            trigger: 'blur'
                        }
                    ],
                    groupId: [
                        {
                            required: true,
                            message: '请选择接口分组',
                            trigger: 'blur'
                        }
                    ],
                    datasourceId: [
                        {
                            required: true,
                            message: '请选择数据源',
                            trigger: 'blur'
                        }
                    ],
                    remarks: [
                        {
                            required: true,
                            message: '请填写接口描述',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            // 修改基本表单配置
            updateBaseFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入接口名称',
                            label: '接口名称',
                            prop: 'apiName',
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入接口方法',
                            label: '接口方法',
                            prop: 'apiPath',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择请求方式',
                            label: '请求方式',
                            prop: 'apiMethods',
                            width: 'w-1',
                            multiple: true,
                            options: getDictDatas('sys_request_method')
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择授权类型',
                            label: '授权类型',
                            prop: 'authType',
                            width: 'w-1',
                            multiple: false,
                            options: getDictDatas('api_auth_type')
                        }
                    ],
                    [
                        {
                            ltype: 'treeSelect',
                            placeholder: '请选择接口分组',
                            label: '接口分组',
                            prop: 'groupId',
                            width: 'w-1',
                            multiple: false,
                            options: []
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择数据源',
                            label: '数据源',
                            prop: 'datasourceId',
                            multiple: false,
                            width: 'w-1',
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: 'mysql',
                            label: '数据源类型',
                            prop: 'datasourceType',
                            disabled: true,
                            width: 'w-1'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入版本号',
                            label: '版本号',
                            prop: 'version',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            type: 'textarea',
                            placeholder: '请输入接口描述',
                            label: '接口描述',
                            prop: 'remarks',
                            width: 'w-1'
                        }
                    ]
                ],
                // 提交项
                formSubmit: {},
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '100px'
                },
                // 验证项
                formRule: {
                    apiName: [
                        {
                            required: true,
                            message: '请输入接口名称',
                            trigger: 'blur'
                        }
                    ],
                    apiPath: [
                        {
                            required: true,
                            message: '请输入接口方法',
                            trigger: 'blur'
                        }
                    ],
                    apiMethods: [
                        {
                            required: true,
                            message: '请选择请求方式',
                            trigger: 'blur'
                        }
                    ],
                    authType: [
                        {
                            required: true,
                            message: '请选择授权类型',
                            trigger: 'blur'
                        }
                    ],
                    groupId: [
                        {
                            required: true,
                            message: '请选择接口分组',
                            trigger: 'blur'
                        }
                    ],
                    datasourceId: [
                        {
                            required: true,
                            message: '请选择数据源',
                            trigger: 'blur'
                        }
                    ],
                    remarks: [
                        {
                            required: true,
                            message: '请填写接口描述',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            addPageFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'radio',
                            label: '是否分页',
                            prop: 'pageSetup',
                            options: []
                        }
                    ]
                ],
                // 提交项
                formSubmit: {
                    pageSetup: '0'
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '80px'
                }
            },
            updatePageFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'radio',
                            label: '是否分页',
                            prop: 'pageSetup',
                            options: []
                        }
                    ]
                ],
                // 提交项
                formSubmit: {
                    pageSetup: '0'
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '80px'
                }
            }
        }
    },
    created() {
        this.initPage()
    },
    methods: {
        /**
         * 页面开始
         */
        async initPage() {
            // 查询分组树列表
            await this.queryTree()
            // 查询数据源列表
            await this.queryDataSourceList()
            // 设置表单的配置项
            this.setFormsItems()
            // 查询api列表
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 左侧部门树相关
         */
        /**
         * 查询部门树
         */
        async queryTree() {
            this.baseTreeConfig.loading = true
            try {
                let res = await apiGroupTree()
                if (res && res.data) {
                    this.baseTreeConfig.data = res.data
                } else {
                    this.baseTreeConfig.data = []
                }
                this.baseTreeConfig.loading = false
            } catch (error) {
                this.baseTreeConfig.loading = false
            }
        },
        /**
         * 树点击
         * @param {Object} params
         */
        handelTreeClick(params) {
            // 初始化查询条件
            this.initQueryParmas()
            this.baseTreeConfig.currentNodeKey = params.item.id
            // 组装查询条件
            this.queryTableParams.entity = {
                groupId: params.item.id
            }
            // 查询数据
            this.queryTableData(this.queryTableParams)
        },

        /**
         * 查询模块列表
         */
        async queryDataSourceList() {
            try {
                let res = await getDataSourceSelectData()
                this.dataSourceList = res.data
            } catch (error) {
                this.dataSourceList = []
            }
        },

        /**
         * 中间表格相关
         */

        /**
         * 查询表格数据
         */
        async queryTableData(params) {
            this.baseTableConfig.tableConfig.loading = true
            try {
                let res = await listApiInfo(params)
                if (res.data) {
                    this.baseTableConfig.tableData = res.data.list
                    this.paginationConfig.total = res.data.totalCount
                } else {
                    this.baseTableConfig.tableData = []
                    this.paginationConfig.total = 0
                }
                this.baseTableConfig.tableConfig.loading = false
            } catch (error) {
                this.baseTableConfig.tableConfig.loading = false
            }
        },
        /**
         * 表格数据被选中
         */
        tableDataSelected(rows) {
            this.baseTableConfig.tableCheckedDatas = rows
        },
        /**
         * 初始化查询参数
         */
        initQueryParmas() {
            this.queryTableParams = {
                pageNo: 0,
                pageSize: 10,
                entity: {
                    groupId: this.baseTreeConfig.currentNodeKey
                }
            }
            this.paginationConfig.size = 10
            this.paginationConfig.currentPage = 1
            this.baseTableConfig.tableData = []
        },
        /**
         * 页码变化
         */
        pageNumberChange(e) {
            this.queryTableParams.pageNo = e
            this.paginationConfig.currentPage = e
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 页大小变化
         */
        pageSizeChange(e) {
            // 页大小变化时，将当前页码设置为0
            this.queryTableParams.pageNo = 0
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableParams.pageSize = e
            this.queryTableData(this.queryTableParams)
        },

        /**
         * 搜索栏相关
         */
        /**
         * 搜索栏按钮点击
         * @param {Object} params
         */
        searchBarButtonClick(params) {
            // 清空查询参数
            this.initQueryParmas()
            try {
                this[params.prop]()
            } catch (error) {
                throw new Error(error)
            }
        },
        /**
         * 重置搜索表单
         */
        resetSearchForm() {
            // 查询参数初始化
            this.initQueryParmas()
            // 重置搜索表单
            this.$refs.searchForm.resetForm()
            // 查询数据
            this.refreshTableData()
        },

        /**
         * 搜索数据
         */
        searchDatas() {
            this.$refs.searchForm.submitForm(() => {
                // 清空查询参数
                this.initQueryParmas()
                // 组装查询条件
                this.queryTableParams.entity = {
                    ...this.searchFormConfig.formSubmit
                }
                // 查询数据
                this.queryTableData(this.queryTableParams)
            })
        },

        /**
         * 操作栏相关
         */
        /**
         * 操作项点击
         * @param {*} params
         */
        handelOptionClick(params) {
            this[params] ? this[params]() : null
        },
        /**
         * 切换搜索栏的显示状态
         */
        switchSearchStatus() {
            this.searchFormConfig.searchContenerShow = !this.searchFormConfig
                .searchContenerShow
        },
        /**
         * 刷新表格数据
         */
        refreshTableData() {
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 设置表格显示隐藏列(打开弹框)
         */
        switchTableColumn() {
            let dialogParams = {
                title: '显示/隐藏',
                width: 'auto',
                show: true,
                key: 'tableColumn'
            }
            // 设置参与表格列控制的属性（最后的数组为不参与隐藏显示设置的列）
            this.tableColumnTransferConfig.data = assemblyDataByTableColumn(
                this.baseTableConfig.tableHeader,
                'label',
                ['选择', '接口名称', '操作']
            )
            this.handelOpenDialog(dialogParams)
        },
        /**
         * 设置表格显示隐藏列(弹框确认)
         */
        switchTableColumnButtonClick() {
            let newData = this.$refs.baseTransfer.backCheckedData()
            if (newData && newData.length > 0) {
                this.baseTableConfig.tableHeader.forEach(ele => {
                    ele.visible = !newData.includes(ele.label)
                })
            } else {
                this.baseTableConfig.tableHeader.forEach(ele => {
                    ele.visible = true
                })
            }
            this.handelCloseDialog()
        },
        /**
         * 设置(新增、修改)表单的表单项
         */
        async setFormsItems() {
            // 重新设置新增、修改 表单的部门树数据配置
            let dataSourceSelectData = setSelectFormart(
                this.dataSourceList,
                'datasourceName',
                'datasourceId'
            )
            this.searchFormConfig.formItems = setFormItemProp(
                this.searchFormConfig.formItems,
                'datasourceId',
                'options',
                dataSourceSelectData
            )
            this.searchFormConfig.formItems = setFormItemProp(
                this.searchFormConfig.formItems,
                'apiStatus',
                'options',
                this.apiStatusList
            )
            this.addBaseFormConfig.formItems = setFormItemProp(
                this.addBaseFormConfig.formItems,
                'datasourceId',
                'options',
                dataSourceSelectData
            )
            this.updateBaseFormConfig.formItems = setFormItemProp(
                this.updateBaseFormConfig.formItems,
                'datasourceId',
                'options',
                dataSourceSelectData
            )

            this.addBaseFormConfig.formItems = setFormItemProp(
                this.addBaseFormConfig.formItems,
                'groupId',
                'options',
                this.baseTreeConfig.data
            )
            this.updateBaseFormConfig.formItems = setFormItemProp(
                this.updateBaseFormConfig.formItems,
                'groupId',
                'options',
                this.baseTreeConfig.data
            )

            this.addPageFormConfig.formItems = setFormItemProp(
                this.addPageFormConfig.formItems,
                'pageSetup',
                'options',
                this.pageSetList
            )
            this.updatePageFormConfig.formItems = setFormItemProp(
                this.updatePageFormConfig.formItems,
                'pageSetup',
                'options',
                this.pageSetList
            )
        },
        /**
         * 新增表格数据(打开弹框)
         */
        addTableData() {
            // 打开新增弹框
            let dialogParams = {
                title: '新增',
                width: '50%',
                show: true,
                key: 'addTableData'
            }
            this.handelOpenDialog(dialogParams)
            this.$nextTick(() => {
                this.initAddForm()
            })
        },
        /**
         * 新增数据确认提交(弹框确认)
         */
        async addFormButtonClick() {
            let res = this.addBaseFormConfig.formSubmit
            res.requestParam = this.paramTableConfig.tableData
            res.pageSetup = this.addPageFormConfig.formSubmit.pageSetup
            let assRes = await addApiInfo(res)
            if (assRes && assRes.code === 0) {
                this.$message.closeAll()
                this.$message.success({ message: '新增成功！' })
                this.initAddForm()
                this.writeSql = ''
                this.paramTableConfig.tableData = []
            } else {
                this.$message.closeAll()
                this.$message.error({ message: '新增失败！' })
            }
            this.handelCloseDialog()
            // 查询数据
            this.refreshTableData()
            this.curActive = 0
        },
        /**
         * 初始化新增表单
         */
        initAddForm() {
            this.addBaseFormConfig.formSubmit = {
                apiName: '',
                apiPath: '',
                apiMethods: [],
                authType: 'none',
                groupId: null,
                datasourceId: '',
                remarks: ''
            }
        },
        /**
         * 修改表格数据(打开弹框)
         */
        async updateTableData(row) {
            this.updateBaseFormConfig.formSubmit = {
                apiId: row.apiId,
                apiName: row.apiName,
                apiPath: row.apiPath,
                apiMethods: row.apiMethod.split(','),
                authType: row.authType,
                groupId: row.groupId,
                datasourceId: row.datasourceId,
                remarks: row.remarks,
                sqlScript: row.sqlScript,
                datasourceType: row.datasourceType,
                version: row.version
            }
            this.paramTableConfig.tableData = row.requestParam
            this.editorOptions.value = row.sqlScript
            this.writeSql = row.sqlScript
            this.updatePageFormConfig.formSubmit = {
                pageSetup: row.pageSetup.toString()
            }
            // 打开修改弹框
            let dialogParams = {
                title: '修改',
                width: '50%',
                show: true,
                key: 'updateTableData'
            }
            this.handelOpenDialog(dialogParams)
        },
        /**
         * 修改数据提交(弹框确认)
         */
        async updateFormButtonClick() {
            let res = this.updateBaseFormConfig.formSubmit
            this.paramTableConfig.tableData.forEach(v => {
                v.apiId = res.apiId
            })
            res.requestParam = this.paramTableConfig.tableData
            let assRes = await updateApiInfo(res)
            if (assRes && assRes.code === 0) {
                this.$message.closeAll()
                this.$message.success({ message: '修改成功！' })
                this.writeSql = ''
                this.paramTableConfig.tableData = []
            } else {
                this.$message.closeAll()
                this.$message.error({ message: '修改失败！' })
            }
            this.handelCloseDialog()
            // 查询数据
            this.refreshTableData()
            this.initUpdateForm()
            this.curActive = 0
        },
        /**
         * 初始化修改表单
         */
        initUpdateForm() {
            this.updateBaseFormConfig.formSubmit = {}
        },
        onCodeChange(param) {
            this.writeSql = param
            if (this.dialogConfig.key === 'addTableData') {
                this.addBaseFormConfig.formSubmit.sqlScript = param
            } else {
                this.updateBaseFormConfig.formSubmit.sqlScript = param
            }
        },

        /**
         * 复制任务
         * @param row
         */
        copyTableData(row) {
            let copyData = this.$_.cloneDeep(row)
            delete copyData.apiId
            this.addFormConfig.formSubmit = copyData
            let dialogParams = {
                title: '复制',
                width: '50%',
                show: true,
                key: 'addTableData'
            }
            this.handelOpenDialog(dialogParams)
        },

        /**
         * 发布接口
         * @param {*} rows
         */
        publicTableData(rows) {
            this.$confirm('是否确认发布该接口?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await publishApiInfo(rows)
                    if (res && res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '发布成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '发布失败!'
                        })
                    }
                    // 查询数据
                    this.refreshTableData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发布'
                    })
                })
        },

        /**
         * 撤销
         * @param row
         */
        revokeData(row) {
            this.$confirm('确认撤销该接口？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let assRes = await revokeApiInfo(row)
                    if (assRes && assRes.code === 0) {
                        this.$message.closeAll()
                        this.$message.success({ message: '撤销成功！' })
                    } else {
                        this.$message.closeAll()
                        this.$message.error({ message: '撤销失败！' })
                    }
                    // 查询数据
                    this.refreshTableData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    })
                })
        },

        /**
         * 上/下线
         * @param {*} rows
         */
        updateEnable(rows, enable) {
            var msg = ''
            if (enable == 0) {
                msg = '是否确认下线该接口?'
            } else {
                msg = '是否确认上线该接口?'
            }
            this.$confirm(msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let params = {
                        apiId: rows.apiId,
                        enabled: enable
                    }
                    let res = await updateApiState(params)
                    if (res && res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: enable == 0 ? '下线成功!' : '上线成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: enable == 0 ? '下线失败!' : '上线失败!'
                        })
                    }
                    // 查询数据
                    this.refreshTableData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    })
                })
        },

        /**
         * 删除表格数据
         */
        deleteTableData(rows) {
            if (
                typeof rows === 'undefined' &&
                this.baseTableConfig.tableCheckedDatas.length > 0
            ) {
                rows = this.baseTableConfig.tableCheckedDatas
            }
            if (typeof rows !== 'undefined') {
                let params = []
                if (Array.isArray(rows) && rows.length) {
                    for (let i = 0; i < rows.length; i++) {
                        const element = rows[i]
                        params.push(element.apiId)
                    }
                } else {
                    params = [rows.apiId]
                }
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        let res = await delApiInfo(params)
                        if (res && res.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            })
                        }
                        // 查询数据
                        this.refreshTableData()
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            } else {
                this.$message({
                    type: 'error',
                    message: '请选择数据！'
                })
            }
        },
        /**
         * 显示详情(打开弹框)
         */
        async showDetail(row) {
            this.detailForm = row
            // 打开详情弹框
            let dialogParams = {
                title: '详情',
                width: '60%',
                height: '80%',
                show: true,
                key: 'showDetail'
            }
            this.handelOpenDialog(dialogParams)
        },
        /**
         * 测试接口(打开弹框)
         */
        testApi(row) {
            this.testApiEditorOptions.value = ''
            this.testApiTableConfig.tableData = row.requestParam
            this.testApiFormSubmit.sqlScript = row.sqlScript
            this.testApiFormSubmit.datasourceId = row.datasourceId
            this.testApiFormSubmit.datasourceType = row.datasourceType
            this.testApiFormSubmit.configParams = row.requestParam
            // 打开详情弹框
            let dialogParams = {
                title:
                    '测试接口' +
                    '【' +
                    row.apiName +
                    ':' +
                    '/api/web/' +
                    row.apiPath +
                    '】',
                width: '40%',
                show: true,
                key: 'testApi'
            }
            this.handelOpenDialog(dialogParams)
        },

        //接口测试确定按钮
        async testApiButtonClick() {
            let map = {}
            this.testApiTableConfig.tableData.forEach(row => {
                map[row.paramName] = row.paramValue
            })
            this.testApiFormSubmit.requestParams = map
            let assRes = await verifyApi(this.testApiFormSubmit)
            this.testApiEditorOptions.value = JSON.stringify(assRes)
        },
        /**
         * 弹框相关
         */
        /**
         * 打开弹框
         * @param {*} params
         */
        handelOpenDialog(params) {
            this.dialogConfig = params
        },
        /**
         * 初始化弹框
         */
        handelInitDialog() {
            this.dialogConfig = {
                title: '',
                show: false,
                width: '',
                key: ''
            }
        },
        /**
         * 关闭弹框
         */
        handelCloseDialog() {
            this.handelInitDialog()
            this.curActive = 0
        },
        /**
         * 弹框确定
         */
        handelCofimeDialog() {
            // 表格列筛选的弹框
            if (this.dialogConfig.key === 'tableColumn') {
                this.switchTableColumnButtonClick()
            } else if (this.dialogConfig.key === 'addTableData') {
                this.addFormButtonClick()
            } else if (this.dialogConfig.key === 'updateTableData') {
                this.updateFormButtonClick()
            } else if (this.dialogConfig.key === 'showDetail') {
                this.handelCloseDialog()
            } else if (this.dialogConfig.key === 'testApi') {
                this.testApiButtonClick()
            }
        },
        /**
         * 设置sql标签
         */
        setSqlFalg(value) {
            let sqlFalgStr = ''
            switch (value) {
                case 'foreach':
                    sqlFalgStr =
                        "<foreach item='item' collection='list' open='(' separator=',' close=')'>\n #{item} \n</foreach>"
                    break
                case 'if':
                    sqlFalgStr =
                        '<if test="id != null and id !=\'\'"> \n and id =#{id} \n </if>'
                    break
                case 'set':
                    sqlFalgStr =
                        '<set> \n <if test="id != null and id !=\'\'"> \n and id =#{id} \n </if> \n </set>'
                    break
                case 'where':
                    sqlFalgStr =
                        '<where> \n <if test="id != null and id !=\'\'"> \n and id =#{id} \n </if> \n </where>'
                    break
                case 'like':
                    sqlFalgStr = " like concat('%', #{name},'%') "
                    break
            }
            this.editorOptions.value = this.writeSql + ' \n ' + sqlFalgStr
        },
        //select的监听事件
        handelStatusChange(params) {
            if (params.prop === 'datasourceId') {
                if (this.dialogConfig.key === 'addTableData') {
                    this.addBaseFormConfig.formSubmit.datasourceType = Vue.filter(
                        'getAttrName'
                    )(
                        this.addBaseFormConfig.formSubmit.datasourceId,
                        this.dataSourceList,
                        'datasourceId',
                        'datasourceType'
                    )
                } else {
                    this.updateBaseFormConfig.formSubmit.datasourceType = Vue.filter(
                        'getAttrName'
                    )(
                        this.updateBaseFormConfig.formSubmit.datasourceId,
                        this.dataSourceList,
                        'datasourceId',
                        'datasourceType'
                    )
                }
            }
        },

        bulidParams(ddlSqlvalue) {
            var prefiex = /#\s*\{\s*/g
            var suffix = /\s*\}/g
            var regex = /#\s*\{\s*\w+?\s*\}/g
            if (ddlSqlvalue != '') {
                var params = []
                if (ddlSqlvalue.indexOf('<foreach') != -1) {
                    let foreachStr = ddlSqlvalue.match(/<foreach([^]*)foreach>/)
                    ddlSqlvalue = ddlSqlvalue.replace(foreachStr[0], '')
                    var code = foreachStr[0].match(/collection='(\S*)'/)[1]
                    params.push({
                        paramName: code,
                        paramModel: 'request',
                        paramType: 'Array',
                        required: true,
                        example: '',
                        paramDesc: ''
                    })
                }
                var matches = ddlSqlvalue.match(regex)
                if (matches) {
                    matches.forEach(v => {
                        var code = v.replace(prefiex, '').replace(suffix, '')
                        params.push({
                            paramName: code,
                            paramModel: 'request',
                            paramType: 'String',
                            required: true,
                            example: '',
                            paramDesc: ''
                        })
                    })
                }
                return params
            }
        },
        next() {
            switch (this.curActive) {
                case 0:
                    if (this.dialogConfig.key === 'addTableData') {
                        this.$refs['addBaseForm'].submitForm(async res => {
                            this.addBaseFormConfig.formSubmit.apiMethod = res.apiMethods.join(
                                ','
                            )
                            this.curActive = 1
                        })
                    } else {
                        this.$refs['updateBaseForm'].submitForm(async res => {
                            this.updateBaseFormConfig.formSubmit.apiMethod = res.apiMethods.join(
                                ','
                            )
                            this.curActive = 1
                        })
                    }
                    break
                case 1:
                    if (this.dialogConfig.key === 'addTableData') {
                        if (!this.addBaseFormConfig.formSubmit.sqlScript) {
                            this.$message.error({
                                message: 'sql语句不能为空！'
                            })
                            return false
                        }
                        let sqlType = this.addBaseFormConfig.formSubmit.sqlScript.split(
                            ' '
                        )[0]
                        if (
                            sqlType.toLowerCase() !== 'select' &&
                            sqlType.toLowerCase() !== 'insert' &&
                            sqlType.toLowerCase() !== 'update' &&
                            sqlType.toLowerCase() !== 'delete'
                        ) {
                            this.$message.error({
                                message: '非法sql语句！'
                            })
                            return false
                        }
                        this.editorOptions.value = this.addBaseFormConfig.formSubmit.sqlScript
                        this.paramTableConfig.tableData = this.bulidParams(
                            this.addBaseFormConfig.formSubmit.sqlScript
                        )
                        this.curActive = 2
                    } else {
                        if (
                            this.updateBaseFormConfig.formSubmit.sqlScript == ''
                        ) {
                            this.$message.error({
                                message: 'sql语句不能为空！'
                            })
                            return false
                        }
                        if (
                            this.writeSql !==
                            this.updateBaseFormConfig.formSubmit.sqlScript
                        ) {
                            this.paramTableConfig.tableData = this.bulidParams(
                                this.updateBaseFormConfig.formSubmit.sqlScript
                            )
                        } else if (
                            this.paramTableConfig.tableData.length === 0
                        ) {
                            this.paramTableConfig.tableData = this.bulidParams(
                                this.updateBaseFormConfig.formSubmit.sqlScript
                            )
                        }
                        this.curActive = 2
                    }
                    break
                case 2:
                    this.curActive = 3
                    break
            }
        },
        prev() {
            this.curActive = this.curActive - 1
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog-content {
    @include box_flex(
        $width: 100%,
        $height: 500px,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .edit-contener {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );
    }
}
.detail-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 600px;
}
.test-content {
    @include box_flex(
        $width: 100%,
        $height: 600px,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .data-contener {
        @include box_flex(
            $width: 100%,
            $height: 300px,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );

        margin-bottom: $margin-md;
    }
    .test-api-button-group {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-end,
            $align: center
        );

        padding: 20px 0;
    }
}
.subtitle {
    margin-bottom: 20px;
    padding-left: 10px;
    font-weight: 600;
    border-left: 5px solid #008ff8;
}
</style>
